import React from 'react'

import {Button, Empty, message} from "antd"
import {ClockCircleOutlined, HeartFilled, EyeFilled, EditFilled, TagOutlined} from "@ant-design/icons"
import {getArticle} from "../../utils/api/article"

import "./index.scss"

/**
 * 文章Article组件
 */
export default class Article extends React.Component {
    state = {
        content: null
    }

    // TODO article interest button
    // CG归档按钮的点击回调
    interestClickHandler = () => {
        message.warn("【关注功能】正在完善中，暂时无法使用，敬请期待~~~", 1.5)
    }

    render() {
        let item = this.state.content
        return (
            <div className="s-article">
                <div className="s-article-box">
                    {
                        item ? (
                            <>
                                <header className="s-article-header">
                                    <div className="article-label">
                                        <ClockCircleOutlined />
                                        <span className="label">{item.label}</span>
                                    </div>
                                    <h1 className="article-title">{item.title}</h1>
                                    <div className="article-info">
                                        <div className="info-left">
                                            <span className="info-time">
                                                {item.time}
                                            </span>
                                            <span className="info-like">
                                                <HeartFilled />
                                                &nbsp;
                                                {item.like}
                                            </span>
                                            <span className="info-look">
                                                <EyeFilled />
                                                &nbsp;
                                                {item.look}
                                            </span>
                                        </div>
                                        <div className="info-right">
                                            <Button className="info-interest" size="middle" onClick={this.interestClickHandler}>关注</Button>
                                        </div>
                                    </div>
                                    <div className="article-author">
                                        <EditFilled />
                                        <span className="author">{item.author}</span>
                                    </div>
                                </header>
                                <div className="s-article-body" dangerouslySetInnerHTML={{__html: item.article_content}}>
                                </div>
                                <div className="s-article-footer">
                                    <span className="footer-label">
                                        <TagOutlined />
                                        <span className="label">Galgame</span>
                                    </span>
                                </div>
                            </>
                        ) : (
                            <div className="s-article-empty">
                                <h2>请求失败</h2>
                                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
                            </div>
                        )
                    }
                </div>
            </div>
        )
    }

    async componentDidMount() {

        // 消息提示

        let article = this.props.match.params.id 
        message.info(`文章${article}: 正在加载中。。。`)

        // 获取数据

        let resp = await getArticle(article)
        // console.log(resp)
        this.setState({content: resp})

        // 页面回滚到顶部

        // console.log(window.document.documentElement.scrollTop)
        let timer = window.setInterval(function () {
            let top = window.document.documentElement.scrollTop
            top -= 30
            if (top <= 0) {
                top = 0
                window.clearInterval(timer)
            }
            // console.log(top)
            window.document.documentElement.scrollTop = top
        }, 10)
    }
}
